Skip to content

feat(remix): Add support for Remix SPA Mode - #3580

Merged
anagstef merged 9 commits into
mainfrom
stefanos/sdk-1819-add-support-for-remix-spa-mode
Jun 28, 2024
Merged

feat(remix): Add support for Remix SPA Mode#3580
anagstef merged 9 commits into
mainfrom
stefanos/sdk-1819-add-support-for-remix-spa-mode

Conversation

@anagstef

@anagstef anagstef commented Jun 17, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This PR adds support for the Remix SPA Mode. ref: https://remix.run/docs/en/main/guides/spa-mode

After users have followed the Remix guide to use the SPA mode in their app, they'll need to make the following changes in their Clerk Remix app:

  1. Remove the rootAuthLoader
  2. Move all their Environment Variables inside the options of the ClerkApp component (except Clerk's Secret Key)
  3. Do not use any server-side Clerk function (e.g. all the imported functions coming from "@clerk/remix/ssr.server")

An example app/root.tsx page that uses SPA Mode, could be the following:

import { ClerkApp } from "@clerk/remix";
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default ClerkApp(App, {
  publishableKey: 'pk_test_XYZ',
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
  signInFallbackRedirectUrl: '/',
  signUpFallbackRedirectUrl: '/',
});

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@anagstef anagstef self-assigned this Jun 17, 2024
@changeset-bot

changeset-bot Bot commented Jun 17, 2024 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 3dd2c03

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@clerk/remix Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@anagstef

anagstef commented Jun 17, 2024

Copy link
Copy Markdown
Contributor Author

!snapshot

@clerk-cookie

clerk-cookie commented Jun 17, 2024

Copy link
Copy Markdown
Collaborator

Hey @anagstef - the snapshot version command generated the following package versions:

Package Version
@clerk/chrome-extension 1.0.19-snapshot.vbc54be6
@clerk/clerk-js 5.7.1-snapshot.vbc54be6
@clerk/elements 0.8.0-snapshot.vbc54be6
@clerk/clerk-expo 1.2.2-snapshot.vbc54be6
gatsby-plugin-clerk 5.0.0-beta.45
@clerk/remix 4.2.0-snapshot.vbc54be6

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/chrome-extension@1.0.19-snapshot.vbc54be6 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.7.1-snapshot.vbc54be6 --save-exact

@clerk/elements

npm i @clerk/elements@0.8.0-snapshot.vbc54be6 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.2.2-snapshot.vbc54be6 --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.0-snapshot.vbc54be6 --save-exact

@anagstef

anagstef commented Jun 27, 2024

Copy link
Copy Markdown
Contributor Author

!snapshot

@anagstef

anagstef commented Jun 27, 2024

Copy link
Copy Markdown
Contributor Author

!snapshot

@clerk-cookie

clerk-cookie commented Jun 27, 2024

Copy link
Copy Markdown
Collaborator

Hey @anagstef - the snapshot version command generated the following package versions:

Package Version
@clerk/chrome-extension 1.1.1-snapshot.ve39e3a5
@clerk/clerk-js 5.7.3-snapshot.ve39e3a5
@clerk/clerk-expo 1.2.4-snapshot.ve39e3a5
gatsby-plugin-clerk 5.0.0-beta.45
@clerk/remix 4.2.0-snapshot.ve39e3a5

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/chrome-extension@1.1.1-snapshot.ve39e3a5 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.7.3-snapshot.ve39e3a5 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.2.4-snapshot.ve39e3a5 --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.0-snapshot.ve39e3a5 --save-exact

@anagstef

anagstef commented Jun 27, 2024

Copy link
Copy Markdown
Contributor Author

!snapshot

@clerk-cookie

clerk-cookie commented Jun 27, 2024

Copy link
Copy Markdown
Collaborator

Hey @anagstef - the snapshot version command generated the following package versions:

Package Version
@clerk/chrome-extension 1.1.1-snapshot.vdf60950
@clerk/clerk-js 5.7.3-snapshot.vdf60950
@clerk/clerk-expo 1.2.4-snapshot.vdf60950
gatsby-plugin-clerk 5.0.0-beta.45
@clerk/remix 4.2.0-snapshot.vdf60950

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/chrome-extension@1.1.1-snapshot.vdf60950 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.7.3-snapshot.vdf60950 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.2.4-snapshot.vdf60950 --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.0-snapshot.vdf60950 --save-exact

@anagstef
anagstef marked this pull request as ready for review June 27, 2024 13:18
octoper
octoper approved these changes Jun 27, 2024
View reviewed changes
Comment thread packages/remix/src/utils/utils.ts Outdated
panteliselef
panteliselef approved these changes Jun 28, 2024
View reviewed changes
Comment thread packages/remix/src/utils/utils.ts
Comment on lines +84 to +86
if (typeof window !== 'undefined' && typeof window.__remixContext?.isSpaMode !== 'undefined') {
return window.__remixContext.isSpaMode;
}

@panteliselef panteliselef Jun 28, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@anagstef could you add a link where window.__remixContext.isSpaMode is mentioned in their docs ? I couldn't find it.

@anagstef anagstef Jun 28, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@panteliselef It's not mentioned because it is kinda internal. My initial proposal was to introduce a spaMode: true prop option, but discussed with @octoper and this solution has better DX.

@anagstef
anagstef merged commit 2f8e79e into main Jun 28, 2024
@anagstef
anagstef deleted the stefanos/sdk-1819-add-support-for-remix-spa-mode branch June 28, 2024 11:27
@clerk-cookie clerk-cookie mentioned this pull request Jun 28, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nikosdouvlis nikosdouvlis Awaiting requested review from nikosdouvlis
@LekoArts LekoArts Awaiting requested review from LekoArts
3 more reviewers
@dimkl dimkl dimkl approved these changes
@octoper octoper octoper approved these changes
@panteliselef panteliselef panteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@anagstef anagstef

Labels

remix

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@anagstef @clerk-cookie @dimkl @octoper @panteliselef